<template>
  <div>
    <div style="background-color: #fff;margin-left:-15px;margin-right:-15px"> 
      这是顶部
    </div>
    <a-row>
      <a-col :span="16">
        <div id="left_div">
          <div style="margin-bottom: 20px">
            <a-card title="进行中的项目">
              <a slot="extra" href="#">全部项目</a>
            </a-card>
          </div>
          <div>
            <a-card title="动态">
              <a-list item-layout="horizontal" :data-source="data">
                <a-list-item slot="renderItem" slot-scope="item">
                  <a-list-item-meta :description="datetime">
                    <span slot="title">
                      {{ item.title }} 在<a> {{ item.title1 }} </a>
                      {{ item.title2 }} <a>{{ item.title3 }}</a>
                    </span>
                    <a-avatar
                      slot="avatar"
                      src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
                    />
                  </a-list-item-meta>
                </a-list-item>
              </a-list>
            </a-card>
          </div>
        </div>
      </a-col>
      <a-col :span="8">
        <div id="right_div">
          <div style="margin-bottom: 20px">
            <a-card title="快速开始 / 便捷导航" style="width: 300px">
              <a-col :span="6" v-for="(item, index) in caozuo" :key="index">
                {{ item.content }}
              </a-col>
              <a-button style="width:80px;height:25px">
                <a-icon type="plus" />
                添加
              </a-button>
            </a-card>
          </div>

          <div>
            <a-card title="xx指数" style="width: 300px; margin-bottom: 20px">
              <img slot="cover" alt="example" src="../assets/指数图.png" />
            </a-card>
          </div>
          <div style="margin-bottom:10px">
            <a-card title="团队" style="width: 300px">
              <a-col :span="12" v-for="(item, index) in datalist" :key="index">
                <a-avatar :src="item.head"> </a-avatar>
                {{ item.team }}
              </a-col>
            </a-card>
          </div>
        </div>
      </a-col>
    </a-row>
  </div>
</template>
<script>
const data = [
  {
    title: "黑衣人",
    title1: "月黑风高团队",
    title2: "创建",
    title3: "百鬼夜行计划",
  },
  {
    title: "哥尔·D·罗杰",
    title1: "罗杰海贼团",
    title2: "创建",
    title3: "大航海计划",
  },
  {
    title: "诸葛亮",
    title1: "蜀国组",
    title2: "更新",
    title3: "草船借箭计划",
  },
  {
    title: "诸葛亮",
    title1: "蜀国组",
    title2: "创建",
    title3: "草船借箭计划",
  },
];

const caozuo = [
  { content: "操作一" },
  { content: "操作二" },
  { content: "操作三" },
  { content: "操作四" },
  { content: "操作五" },
  { content: "操作六" },
];

const datalist = [
  {
    head: "https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png",
    team: "月黑风高团",
  },
  {
    head: "https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png",
    team: "蜀国组",
  },
  {
    head: "https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png",
    team: "罗杰海贼团",
  },
];

import { formatDate } from "@/utils/GetDateTime";
export default {
  name: "workbench",
  components: {},
  data() {
    return {
      data,
      datetime: formatDate("YY-MM-DD hh:mm:ss"),
      caozuo,
      datalist,
    };
  },
  methods: {
  },
};
</script>
<style>
#right_div {
  margin-left: 10px;
}
</style>